<template>
  <view class="container">
    <background />
    <view class="user_info">
      <u-avatar
        style="margin-top: -160rpx; border: 3px solid #fff"
        :src="avatarUrl"
        size="80"
      ></u-avatar>
      <text class="text">{{ nickName }}</text>
      <text class="school_name">{{ schoolName }}</text>
    </view>
    <view class="content">
      <card>
        <template v-slot:header>
          <text>我的服务</text>
        </template>
        <u-grid :border="false" col="4">
          <u-grid-item
            v-for="(listItem, listIndex) in list"
            :key="listIndex"
            @click="clickHandle(listItem)"
          >
            <u-icon
              :customStyle="{ paddingTop: 20 + 'rpx' }"
              :name="listItem.name"
              :size="28"
              :custom-prefix="listItem.custom_prefix"
            ></u-icon>
            <text class="grid-text">{{ listItem.title }}</text>
          </u-grid-item>
        </u-grid>
        <button v-if="openId" @click="calcelLoginHandle" class="btn">
          退出登录
        </button>
        <button v-else @click="loginHandle" class="btn">登录</button>
        <view class="explain">
          <view>@此软件的归属权为云南师范大学所有</view>
          <view>测试版本 1.1.0</view>
        </view>
      </card>
    </view>
  </view>
</template>

<script>
import background from "@/components/Background/index";
import card from "@/components/Card/index";
import { mapGetters } from "vuex";

export default {
  name: "me",
  components: {
    background,
    card,
  },
  data() {
    return {
      list: [
        {
          name: "car",
          title: "收货地址",
          clickHandle: "toAddress",
          url: `/pages/address/index`,
        },
        // {
        //   name: "trash",
        //   title: "清除缓存",
        //   clickHandle: "clearCache",
        // },
        // {
        //   name: "share-square",
        //   title: "检查更新",
        // },
      ],
    };
  },
  computed: {
    ...mapGetters(["nickName", "avatarUrl", "schoolName", "openId"]),
  },
  methods: {
    clickHandle(item) {
      switch (item.clickHandle) {
        case "toAddress":
          this.toAddress(item);
          break;
        case "clearCache":
          this.clearCache(item);
          break;
      }
    },
    toAddress(item) {
      const url = `${item.url}?openId=${this.openId}`;
      uni.navigateTo({
        url,
      });
    },
    clearCache() {
      uni.showModal({
        title: "清除缓存",
        content: "当前缓存为12M,是否清除?",
        success: function (res) {},
      });
    },
    checkVersion() {},
    //退出登录
    calcelLoginHandle() {
      this.$store.dispatch('FedLogOut')
    },
    //登录事件
    loginHandle() {
      this.$store
        .dispatch("Login")
        .then((result) => {
          uni.showToast({
            title: "登录成功!",
            icon: "success",
            duration: 2000,
          });
          if (!result) {
            store.commit("SET_SCHOOL_ID", "");
            store.commit("SET_SCHOOL_NAME", "");
            store.commit("SET_AREA_CODE", "");
            return;
          }
          this.$store.dispatch("getSchoolInfo", result);
        })
        .catch((err) => {
          uni.showToast({
            title: "登录失败!",
            icon: "error",
            duration: 2000,
          });
        });
    },
  },
};
</script>

<style lang="scss">
.container {
  background-color: #f6f7f4;
  height: 100%;
  .user_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 656rpx;
    height: 290rpx;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: -145rpx auto 18rpx auto;
    border-radius: 12rpx;
    .text {
      color: #141415;
      font-weight: bolder;
      font-size: 40rpx;
    }
    .school_name {
      background-color: #234f9e;
      margin-top: 18rpx;
      color: #fff;
      padding: 15rpx 12rpx;
      border-radius: 10rpx;
      font-size: 40rpx;
    }
  }
  .content {
    padding: 28rpx;
    .btn {
      margin: 28rpx 40rpx;
      background: #234f9e;
      color: #fff;
      border-radius: 60rpx;
    }
    .explain {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #959595;
      margin-bottom: 40rpx;
    }
  }
  .grid-text {
    font-size: 14px;
    color: #909399;
    padding: 10rpx 0 20rpx 0rpx;
    /* #ifndef APP-PLUS */
    box-sizing: border-box;
    /* #endif */
  }
}
</style>
